layui.use(['form','layer','table'],function(){
	var $ = layui.jquery,
		table = layui.table,
		form = layui.form;
	// 用户列表
    var tableIns = table.render({
        elem: '#userList',
        url : '../../users/',
        method : 'GET',
        cellMinWidth : 95,
        page : true,
        height : 'full-125',
        limit : 10,	// 注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        limits : [10,15,20,25],	// 分页选择
        id : 'userListTable',
        cols : [[
            {type: 'checkbox', fixed:'left', width:50},
            {field: 'loginId', title: '登录名', width:150},
            {field: 'userName', title: '用户姓名', width:150},
            {field: 'email', title: '邮箱', align:'center'},
            {field: 'phone', title: '手机', align:'center'},
            {field: 'status', title: '状态', align:'center', templet: function(d){
            	return '<input type="checkbox" name="status" lay-filter="userStatus" '
            			+'lay-skin="switch" lay-text="正常|失效" '+(d.status==1?"checked":"")
            			+' qs-id='+d.id+'>';
            }},
            {title: '操作', width:200, templet:'#userListBar',fixed:'right',align:'center'}
        ]]
    });
    
    // 是否置顶
    form.on('switch(userStatus)', function(data){
        var index = layer.msg('修改中，请稍候',{icon: 16,time:false,shade:0.8});
        setTimeout(function(){
            layer.close(index);
            if(data.elem.checked){
	            updateStatus(data.elem.attributes["qs-id"].value, 1);
	            layer.msg("置顶成功！");
            }else{
	            updateStatus(data.elem.attributes["qs-id"].value, 0);
	            layer.msg("取消置顶成功！");
            }
        },500);
    })
    
    // 更新状态方法
    function updateStatus(id, val){
        $.ajax({
            url : '../../users/',
            type : 'PUT',
            data : {id: id, status: val}
        })
    }
    
    // 添加用户
    $(".addUsers_btn").click(function(){
        operateUser();
    })
    
    // 列表操作
    table.on('tool(userList)', function(obj){
        var layEvent = obj.event,
            data = obj.data;

        if(layEvent === 'edit'){ // 编辑
        	operateUser(data);
        } else if(layEvent === 'del'){ // 删除
            layer.confirm('确定删除此文章？',{icon:3, title:'提示信息'},function(index){
                $.ajax({
                    url : "../../users/"+data.id,
                    type : "DELETE",
                    success : function () {
                        tableIns.reload();
                        layer.close(index);
                    }

                })
            });
        } else if(layEvent === 'look'){ // 预览
            layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问")
        }
    });
    
    // 角色的操作（新增、修改）
    function operateUser(userObj){
    	var index = layui.layer.open({
    		title : userObj ? "编辑用户" : "添加用户",
            type : 2,
            content : "userAU.html",
            success : function(layero, index){
            	var body = layui.layer.getChildFrame('body', index);

                if(userObj){
                    setDataByQsName(body, userObj);
                    form.render();
                }
            }
    	});
    	layui.layer.full(index);
        //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
        $(window).on("resize",function(){
            layui.layer.full(index);
        })
    }
    
    // 检索功能
    $(".search_btn").on("click",function(){
        table.reload("userListTable",{
            page: {
                curr: 1 // 重新从第1页开始
            },
            where: {
                userName: $(".searchVal").val()  // 搜索关键字
            }
        })
    });

    // 根据qs-name设置form的值
    function setDataByQsName(body, obj){
        let fromObj = body[0].firstElementChild;
        let eles = fromObj.elements;
        for(let i = 0; i < eles.length; i++){
            let qsName = eles[i].attributes["qs-name"].value;
            if(qsName != null){
                body.find("."+qsName).val(obj[qsName]);
            }
        }
    }
});